/**
 * 目标1：验证码登录
 * 1.1 在 utils/request.js 配置 axios 请求基地址
 * 1.2 收集手机号和验证码数据
 * 1.3 基于 axios 调用验证码登录接口
 * 1.4 使用 Bootstrap 的 Alert 警告框反馈结果给用户
 */
// 1.2 收集手机号和验证码数据
document.querySelector('.btn').addEventListener('click', async e => {
  const formDom = document.querySelector('.login-form')
  const data = serialize(formDom, {hash: true, empty: true})
  try{
    if(data.mobile.length !== 11){
      myAlert(false, '请输入11位手机号码')
      return
    }
    if(data.code.length !== 6){
      myAlert(false, '请输入6位验证码')
      return
    }
    // 1.3 axios 调用验证码登录接口
    const res = await axios({url:'/v1_0/authorizations', method:'post', data})
    console.log(data)
    console.log(res)
    
    // myAlert(true, res.data.message)
    // 1.4 使用 Bootstrap 的 Alert 警告框反馈结果给用户
    myAlert(true, '登录成功')
    // 缓存token  有axios 响应拦截器 把结果处理过了
    localStorage.setItem('token', res.data.token)
    // 延时跳转
    setTimeout(() => {
      // 跳转
    location.href = '../content/index.html'
    }, 1500)
    
  }catch(err){
    console.dir(err)
    // myAlert(false, err.response.data.message)
    // axios 响应拦截器已处理 错误返回值
    myAlert(false, err.data.message)
  }
  
})


// 空值合并运算符（??）是一个逻辑运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。不能与 AND 或 OR 逻辑运算符共用
// 与逻辑或运算符（||）不同，逻辑或运算符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，比如为假值（例如，'' 或 0 、NaN）时。也会返回其右侧操作数。
const nullValue = null;
const emptyText = ""; // 空字符串，是一个假值，Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = nullValue || "valC 的默认值";
const valD = emptyText || "valD 的默认值";
console.log(valA) // valA 的默认值
console.log(valB) // ""
console.log(valC) // valC 的默认值
console.log(valD) // valD 的默认值

// 可选链运算符（?.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。
// -> ?. 运算符的功能类似于 . 链式运算符，不同之处在于，在引用为空(nullish)，即 null 或者 undefined 的情况下
// -> 不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。
const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah',
  },
}
// 变量调用 使用
const dogName = adventurer.dog?.name
console.log(dogName) // undefined

// 函数调用 使用
console.log(adventurer.someNonExistentMethod?.()) // undefined

// 数组 使用
// obj.val?.[expr]

// 合用 ?? 和 ?.
let customer = {
  name: "Carl",
  details: { age: 82 },
}
let customerCity = customer?.city ?? "暗之城"
console.log(customerCity) // 暗之城

// 逻辑空赋值运算符(??=).  x ??= y仅在 x 是空值（null 或 undefined）时对其赋值。 x ??= y 等价于 x ?? (x = y)
const a = { duration: 50 }

a.speed ??= 25
console.log(a.speed)// output: 25

a.duration ??= 10
console.log(a.duration)// output: 50

